<template>
<div class="index-layout common-page">
  <xdh-header
    class="index-layout__head"
    ref="layoutHead"
    :layout="headLayout"
  > <!-- search-width="400px"  
    :search-keyword="headSearchKw" 
    @on-search="headSearchHandle"-->
    <img style="height: 100%;margin-top: 0" slot="logo" src="../../public/img/head-logo.png" />

    <div class="search-wrap" slot="search">
      <input type="text" v-model="input"/>
      <div class="button" @click="headSearchHandle">
        <i class="el-icon-search"></i>
      </div>
    </div>
  </xdh-header>
  
  <div class="index-layout__main">
    <router-view />
  </div>
</div>
</template>
<style scoped lang="scss">
@import '../style/_vars.scss';
.index-layout {
  display: flex;
  flex-flow: column;
  &__head.xdh-header.is-default {
    background: no-repeat;
    background-color: $--color-primary;
    background-image: url('../../public/img/head-bg.jpg');
    background-size: auto 100%;
    background-position: 0 0;
    .search-wrap{
      display: flex;
      flex-flow: row nowrap;
      width: 300px;
      height: 40px;
      // border: 1px solid red;
      input{
        display: 1;
        width: calc(100% - 80px);
        height: 40px;
        padding: 0 10px;
        border: 1px solid $--color-primary-light-7;
        border-right: 0px solid red;
      }
      .button{
        flex: 0 0 80px;
        height: 100%;
        line-height: 40px;
        text-align:center;
        color: white;
        vertical-align: center;
        background: $--color-primary-light-7;

        cursor: pointer;
      }
    }
  }
  &__main{
    flex: 1;
    width: 100%;
    height: calc(100% - 60px);
  }
}
</style>

<script>
import XdhHeader from '@/widgets/xdh-header'
export default {
  name: 'Layout',
  components: {
    XdhHeader
  },
  data() {
    return {
      input: ''
    }
  },
  computed: {
    headLayout() {
      let reg = /\/result/gi;
      if (reg.test(this.$route.path)) {
        return 'logo ,search'
      } else {
        return 'logo'
      }
    },
    headSearchKw() {
      return this.$route.params.keyword || ''
    }
  },
  watch: {
    '$route.params.keyword': {
      handler: function(val) {
        this.input = val
      }
    }
  },
  methods: {
    // layoutSearchHandle() {
    //   console.log(this.$refs.layoutHead)
    // },
    headSearchHandle() {
      if (!this.input || this.input === this.$route.params.keyword) return
      let encodeKw = encodeURIComponent(this.input)
      this.$router.push({
        path: `/result/${encodeKw}`
      })
      this.$store.commit({
        type: `result-nav-tabs/push`,
        tab: {
          label: this.input,
          name: `/result/${encodeKw}`,
          closable: true
        }
      })
    }
  },
  mounted() {
  }
}
</script>


